<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      console.log(1);

      setTimeout(() => {
        console.log(2);
        queueMicrotask(() => {
          console.log(3);
        });
      }, 0);

      queueMicrotask(() => {
        console.log(4);
        setTimeout(() => {
          console.log(5);
        }, 0);
      });

      console.log(6);

      // 第一次循环
      // 先宏后微，第一次js编译当成宏任务
      // 加载顺序：同步：1 --->timeout：2 交给浏览器0ms之后又加载到宏任务队列：1号---> que:4 加载到微任务队列 ---> 清空微任务队列 ---> 同步：6
      // 输出：1 6 4
      // 第二次循环
      // 加载顺序：timeout:5 交给浏览器0ms之后又加载到宏任务队列：2号 ---> 执行宏任务队列：1号 ---> que:3 加载到微任务队列  ---> 清空微任务队列
      // 输出：2 3
      // 第三次循环
      // 执行宏任务输出：5
      // 事件循环结束
      // 输出：1 6 4 2 3 5
    </script>
  </body>
</html>
